<template>
	<view class="task-container">
		<view class="not-complete-task">
			<view class="task-title">
				<text>未完成</text>
			</view>
			<view class="task-body">
				<view class="task-item" v-for="(item,index) in taskList" @longpress="swithDelete" v-if="item.delFlag == 0">
					<checkbox @click="taskClick(item)" v-show="!isShowDelete" />
					<uni-icons type="close" size="26" @click="deleteClick(item)" v-show="isShowDelete"></uni-icons>
					<text class="task-item-text">{{item.taskDescription}}</text>
				</view>
			</view>
		</view>
		<view class="complete-task">
			<view class="task-title">
				<text>已完成</text>
			</view>
			<view class="task-body">
				<view class="task-item" v-for="(item,index) in taskList" @longpress="swithDelete" v-if="item.delFlag == 1">
					<checkbox checked="true" style="bef" @click="taskClick(item)" v-show="!isShowDelete" />
					<uni-icons type="close" size="26" @click="deleteClick(item)" v-show="isShowDelete"></uni-icons>
					<text class="task-item-text strike-through">{{item.taskDescription}}</text>
				</view>
			</view>
		</view>
		<view>
			<!-- 添加任务 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<uni-section title="任务信息" type="line">
						<view class="example">
							<uni-easyinput v-model="taskDescription" placeholder="请输入任务内容" />
							<view class="button-group">
								<button type="primary" class="uni-btn bg-blue" @click="submit">提交</button>
							</view>
						</view>
					</uni-section>
				</view>
			</uni-popup>
		</view>
		<uni-fab ref="fab" :horizontal="horizontal" :vertical="vertical" :direction="direction" @fabClick="toggle('bottom')" />
	</view>
</template>

<script>
	import {
		addTask,
		getTaskList,
		deleteTask,
		disableOrEnableTask
	} from '@/api/record/task.js';
	export default {
		data() {
			return {
				isShowDelete: false,
				taskDescription:'',
				showLeft: false,
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				query: {},
				taskList: [],
				value: [0],
				range: [{
					"value": 0,
					"text": ""
				}]
			}
		},
		onLoad() {
			this.initTask();
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				//this.$refs.popup.close()
			},
			submit(){
				var that = this;
				var data = {'taskDescription':this.taskDescription}
				addTask(data).then(response => {
					that.initTask();
					that.taskDescription = '';
					this.$refs.popup.close()
				})
			},
			taskClick(item) {
				console.log(item);
				var that = this;
				disableOrEnableTask(item.taskId).then(response => {
					that.initTask();
				});
			},
			initTask() {
				var that = this;
				getTaskList(that.query).then(response => {
					that.taskList = response.rows;
				});
			},
			addClick() {
				uni.navigateTo({
					url: '/pages/package/work/task/add'
				});
			},
			deleteClick(item) {
				console.log(item);
				var that = this;
				deleteTask(item.taskId).then(response => {
					that.initTask();
				});
			},
			swithDelete(){
				this.isShowDelete = !this.isShowDelete;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-container {
		padding: 20px;
		.task-title {
			margin-top: 10px;
			padding: 10px;
			background-color: white;
			border-top: solid #8080802b 1px;
			font-weight: bolder;
		}
		.task-body{
			background-color: white;
			.task-item {
				margin: 0 10px;
				padding: 10px 0;
				border-top: solid #8080802b 1px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
				align-items: center;
				.task-item-body{
					margin: 0 10px;
				}
				.task-item-text {
					margin-left: 10px;
				}
			}
		}
		

		.strike-through {
			text-decoration: line-through;
		}
		.button-group {
			margin-top: 15px;
			display: flex;
		    //position: fixed;
			justify-content: space-around;
		    bottom: 0;
			.uni-btn {
				width: 750rpx;
				border-radius: 0;
			}
		}
	}
</style>